<template>
  <div class="inputDom">
    <input
      :class="{error:!isValid}"
      :type="type"
      :placeholder="placeholder"
      v-model="val"
      @blur="handleBlur"
    />
  </div>
</template>

<script>
export default {
  props: ["placeholder", "type", "rule", "err_msg"],
  data() {
    return {
      val: "",

      isValid: true,
    };
  },
  watch: {
    // console.log('输入发生了变化');
    // 利用正则表达式进行检测
    // var reg = /^\d{6}$/
    // 假设我希望输入框如何数据合法, 一切正常
    // 如果不合法则显示红色下边框
    // 1. 在这将检测的结果存储到自己的 data 当中
    val() {
      if (this.rule.test(this.val)) {
        console.log("符合要求");
        this.isValid = true;
      } else {
        console.log(this.err_msg);
        this.isValid = false;
      }

      // 这里是每当数据发生变化时,
      // 都要进行的校验
      // 之前只进行了校验, 父页面完全不知道数据
      // 现在需要给父组件传出输入框数据
      this.$emit("valChange", this.val);

      // 这里判断是否正确的方式,
      // 其实可以按照你的想法任意写逻辑
      // 比如添加一个, 如果为空则强制合法的判断

      //这个判断写在最后可以防止return 的拦截
      if (!this.val) {
        this.isValid = true;
        return;
      }
    },
  },
  methods: {
    handleBlur() {
      // 这里是输入框失去焦点时触发的函数,
      // 需要验证一下当前的 isValid 是否还是 false
      // 如果还是, 就弹出一个框告诉用户出错了
      // 如果合法,则啥都不干
      console.log("失去焦点");
      if (!this.isValid) {
        this.$toast.fail(this.err_msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputDom {
  input {
    outline: none;
    margin-top: 40/360 * 100vw;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #757575;
    font-size: 18/360 * 100vw;
    padding-bottom: 10/360 * 100vw;
  }
  .error {
    border-bottom: 2px solid red;
  }
}
</style>